<template>
  <div class="container">
    <div
      class="invoice-footer row jcsb mt-1"
      flex
    >
      <el-button
        :type="isSelectAll ? '' : 'primary'"
        @click="handleSelectAll"
        size="mini"
      >全部{{ isSelectAll ? "取消" : "选择" }}</el-button>

      <div class="invoce-count row">
        <p>
          本次申请开票订单数:
          <b class="red">{{ ids.length }}</b>个
        </p>
      </div>
      <div class="row ml-3">
        <p>
          本次申请开票金额:
          <b class="red">{{ invoiceTotalAmount.toFixed(2) }}</b>元
        </p>
      </div>
      <el-button
        :disabled="ids.length == 0"
        @click="handleApplyInvoices"
        class="ml-1"
        size="mini"
        type="danger"
      >申请开票</el-button>
    </div>
    <xy-table
      :api="api"
      :columns="columns"
      @selection-change="handleSelectionChange"
      class="table"
      multiple
      queryColumn="BusinessNo"
      ref="table"
    >
      <template #addItem>
        <span></span>
      </template>
      <template #selection>
        <el-table-column
          :selectable="isDisabled"
          align="center"
          type="selection"
        ></el-table-column>
      </template>
      <template #operation>
        <el-table-column
          :label="$language.local('操作')"
          align="center"
          key="ope"
          width="126"
        >
          <template slot-scope="scope">
            <el-row class="center">
              <el-col
                :span="8"
                class="center"
                v-if="scope.row.OpenInvoiceStatus !== 1"
              >
                <el-tooltip
                  :content="$language.local('申请开票')"
                  :enterable="false"
                  class="item"
                  effect="dark"
                  placement="top"
                >
                  <el-button
                    @click="toApply(scope.row)"
                    circle
                    size="mini"
                    type="primary"
                  >
                    <i class="el-icon-s-ticket"></i>
                  </el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <!-- 底部开票申请 -->
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  data() {
    return {
      invoiceTotalAmount: 0,
      ids: [],
      api: new API("/api/invoiceApply"),
      isSelectAll: false,

      columns: {
        MerchantName: "湖南格凡安信科技有限公司",
        ServiceProviderName: "湖南好捷科技有限公司",
        SPName: "",
        atime: "",
        sumpayamount: 704112.02,
        OpenInvoiceStatus: 0,
      },
    };
  },
  created() {},
  methods: {
    handleSelectionChange(val = []) {
      this.invoiceTotalAmount = val.reduce(
        (total, cur) => total + cur.Amount,
        0
      );
      console.log(this.invoiceTotalAmount);
      this.ids = Array.from(val, (v) => v.Id);
      console.log(this.ids);
    },
    async confirm() {
      if (this.ids.length == 0) {
        this.$message.error("请选择需要开具发票的记录");
        return;
      }
      await this.$confirm(
        `本次申请的待开票订单 ${
          this.ids.length
        } 个, 金额 ${this.invoiceTotalAmount.toFixed(2)} 元, 请核对, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((e) => {
        this.ids = [];
        this.$message.info("已取消开票申请");
        throw e;
      });
    },
    /**
     * 申请开票 1~∞
     */
    async handleApplyInvoices() {
      await this.confirm();
      this.$router.push({
        name: "发票填写",
        params: {
          ids: this.ids,
        },
      });
    },
    /**
     * 全部选择
     */
    handleSelectAll() {
      let list = this.$refs["table"].$refs["multipleTable"];
      list.toggleAllSelection();
      this.isSelectAll = !this.isSelectAll;
    },
    async toApply(row) {
      this.invoiceTotalAmount = row.Amount;
      this.ids = [row.Id];
      await this.confirm();
      this.$router.push({
        name: "发票填写",
        params: {
          ids: this.ids,
        },
      });
    },
    isDisabled(row) {
      return row.OpenInvoiceStatus !== 1;
    },
  },
};
</script>

<style lang="less" scoped>
.invoice-footer {
  display: flex;
  align-items: center;
  margin-bottom: 1ex;
}
</style>
